<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="960px"
    append-to-body
  >
    <el-form ref="form" :model="formdata" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input
              placeholder="请输入姓名"
              readonly
              v-model="formdata.stuName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号">
            <el-input
              placeholder="请输入学号"
              readonly
              v-model="formdata.sno"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在院部">
            <el-input
              placeholder="请输入所在院部"
              readonly
              v-model="formdata.deptNames"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业">
            <el-input
              placeholder="请输入专业"
              readonly
              v-model="formdata.specialityName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级">
            <el-input
              placeholder="请输入年级"
              readonly
              v-model="formdata.gradeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级">
            <el-input
              placeholder="请输入班级"
              readonly
              v-model="formdata.className"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌">
            <el-input
              placeholder="请输入政治面貌"
              readonly
              v-model="formdata.political"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否录入智慧团建">
            <el-radio-group v-model="formdata.isBuilding">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'0'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发展团员编号">
            <el-input
              placeholder="请输入发展团员编号"
              v-model="formdata.memberCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否注册为志愿者">
            <el-radio-group v-model="formdata.isVolunteer">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'0'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="志愿服务时长（小时）">
            <el-input
              placeholder="请输入志愿服务时长"
              v-model.number="formdata.volunteerTime"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入团时间">
            <el-date-picker
              v-model="formdata.value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属组织">
            <treeselect
              v-model="formdata.orgId"
              :options="treeData"
              :show-count="true"
              :normalizer="normalizer"
              placeholder="请选择所属组织"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addOrganizeUser,
  editOrganizeUser,
  addClubOrganizeUser,
  editClubOrganizeUser,
} from "@/api/leagueManagement/organizeUser";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "organizationAddDlg",
  components: {
    Treeselect,
  },
  props: {
    treeData: {
      type: Array,
      default: [],
    },
    isCommittee: {
      type: Boolean,
      default: false,
    },
    isStudentClub: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "修改",
      visible: false,
      formdata: {},
      rules: {},
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.childList,
        };
      },
      type: "add",
    };
  },
  methods: {
    open(data, type) {
      console.log(data);
      this.type = type;
      if (type == "add") {
        this.title = "添加";
        this.formdata = {
          ...data,
          stuName: data.name,
        };
      } else if (type == "edit") {
        this.title = "修改";
        this.formdata = {
          ...data,
        };
      }
      this.visible = true;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        console.log(valid);
        if (valid) {
          if (this.type == "edit") {
            if (this.isCommittee) {
              editOrganizeUser(this.formdata).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.visible = false;
                this.$emit("updateList");
              });
            }
            if (this.isStudentClub) {
              const _params = {
                ...this.formdata,
                unionId: this.formdata.orgId,
              };
              editClubOrganizeUser(_params).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.visible = false;
                this.$emit("updateList");
              });
            }
          } else {
            if (this.isCommittee) {
              const _params = {
                ...this.formdata,
                stuId: this.formdata.id,
              };
              console.log(this.isStudentClub, _params, "this.isStudentClub");
              addOrganizeUser(_params).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.visible = false;
                this.$emit("updateList");
              });
            }
            if (this.isStudentClub) {
              const _params = {
                ...this.formdata,
                stuId: this.formdata.id,
              };
              addClubOrganizeUser(_params).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.visible = false;
                this.$emit("updateList");
              });
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>